<!-- bug待修复: formData 打印 undefined 问题 -->
<script lang="tsx">
export default defineComponent({
  props: {
    formConfig: {
      type: Array,
      default: []
    },
    labelCol: {
      type: Object,
      default: { style: { width: '80px' } }
    }
  },
  // 不能setup(context)
  setup(props, context) {
    // 这里踩了个坑,不能formData = ref({})
    const state = reactive({
      formData: {}
    })
    const formRef = ref()
    const methods = {
      onSubmit() {
        console.log(formRef.formData)
        // console.log('submit');
        return formRef.value
          .validate()
          .then((values: any) => {
            console.log(state.formData)
            let temp = JSON.parse(JSON.stringify(state.formData))
            return temp
            // var submitData = methods.formatData()
            // return submitData
          })
          .catch((info: any) => {
            formRef.value.scrollToField(info.errorFields[0]?.name?.[0], {
              behavior: 'smooth',
              block: 'center'
            })
          })
      },
      renderFormItem(item) {
        const type = item.type
        const commmon = {
          placeholder: '请填写' + item.label,
          disabled: item.disabled,
          ...item.attrs
        }

        // #region 表单校验
        let rules = {}
        if (item.required) {
          rules.required = true
          rules.message = '此项为必填项'
          rules.trigger = 'blur'
        } else {
          rules.required = false
        }
        if (item.validator) {
          delete rules.message
          rules.validator = item.validator
          if (item.type == 'select') {
            rules.trigger = 'change'
          } else {
            rules.trigger = 'blur'
          }
        }
        // #endregion 表单校验

        const dom = {
          input: () => {
            return (
              <a-input
                v-model:value={state.formData[item.key]}
                {...commmon}
              ></a-input>
            )
          },
          number: () => {
            return (
              <a-input-number
                v-model:value={state.formData[item.key]}
                {...commmon}
              ></a-input-number>
            )
          },
          textarea: () => {
            return (
              <a-textarea
                v-model:value={state.formData[item.key]}
                row={3}
                {...commmon}
              ></a-textarea>
            )
          },
          radio: () => {
            return (
              <a-radio-group
                v-model:value={state.formData[item.key]}
                {...commmon}
              >
                {item.data?.map((k: any) => {
                  return (
                    <a-radio
                      value={item.custom ? k[item.custom.value] : k.value}
                    >
                      {item.custom ? k[item.custom.label] : k.label}
                    </a-radio>
                  )
                })}
              </a-radio-group>
            )
          },
          checkbox: () => {
            return (
              <a-checkbox-group
                v-model:value={state.formData[item.key]}
                {...commmon}
              >
                {item.data?.map((k: any) => {
                  return (
                    <a-checkbox
                      value={item.custom ? k[item.custom.value] : k.value}
                    >
                      {item.custom ? k[item.custom.label] : k.label}
                    </a-checkbox>
                  )
                })}
              </a-checkbox-group>
            )
          },
          select: () => {
            return (
              <a-select
                v-model:value={state.formData[item.key]}
                {...commmon}
                placeholder={'请填写' + item.label}
                options={item.data}
              ></a-select>
            )
          },
          date: () => {
            return (
              <a-date-picker
                v-model:value={state.formData[item.key]}
                format={'YYYY-MM-DD'}
                {...commmon}
              ></a-date-picker>
            )
          },
          daterange: () => {
            return (
              <a-range-picker
                v-model:value={state.formData[item.key]}
                type="daterange"
                format={'YYYY-MM-DD'}
                {...commmon}
                placeholder={['开始时间', '结束时间']}
              ></a-range-picker>
            )
          },
          slot: () => {
            let slot =
              context.slots[item.slotName] ??
              context?.attr?.slots[item.slotName]
            return slot({
              formData: state.formData,
              key: item.key
            })
          }
        }

        function handleFormItem(html: HTMLElement) {
          return (
            <a-col span={item.col || 24}>
              <a-form-item label={item.label} name={item.key} rules={rules}>
                {html}
              </a-form-item>
            </a-col>
          )
        }
        return handleFormItem(dom[type])
      },
      handleHide(hide) {
        if (!hide && typeof hide != 'function') {
          return false
        } else {
          return hide(state.formData)
        }
      },
      initFormDate() {
        props.formConfig.forEach(
          item => (state.formData[item.key] = item.defaultValue)
        )
      }
    }
    onMounted(() => {
      methods.initFormDate() //表单数据初始化
    })
    return {
      ...toRefs(state),
      formRef,
      ...methods
    }
  },
  // {}相当于v-bind
  render() {
    return (
      <>
        <div>
          <a-form
            ref="formRef"
            model={this.formData}
            labelCol={this.$props.labelCol}
          >
            <a-row gutter={24}>
              {this.$props.formConfig.map(item =>
                this.handleHide(item.hide) ? '' : this.renderFormItem(item)
              )}
            </a-row>
          </a-form>
        </div>
      </>
    )
  }
})
</script>
<script></script>
